<template>
  <div class="log-analytics-page">
    <div class="page-header">
      <h2>系统日志分析</h2>
      <div class="header-actions">
        <el-button type="primary" icon="DataAnalysis">智能分析</el-button>
        <el-button type="success" icon="Download">导出报告</el-button>
      </div>
    </div>

    <!-- 日志概览 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8f4ff">
            <el-icon color="#409eff" :size="24"><Document /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.totalLogs }}</div>
            <div class="stat-label">日志总数（今日）</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff0f0">
            <el-icon color="#ff4d4f" :size="24"><Warning /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.errorLogs }}</div>
            <div class="stat-label">错误日志</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #fff5e8">
            <el-icon color="#fa8c16" :size="24"><InfoFilled /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.warningLogs }}</div>
            <div class="stat-label">警告日志</div>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-icon" style="background: #e8fff3">
            <el-icon color="#52c41a" :size="24"><User /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ stats.activeUsers }}</div>
            <div class="stat-label">活跃用户</div>
          </div>
        </div>
      </el-col>
    </el-row>

    <!-- 图表分析 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>日志趋势分析</span>
              <el-radio-group v-model="trendPeriod" size="small">
                <el-radio-button label="today">今天</el-radio-button>
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div class="chart-container">
            <div style="text-align: center; padding: 80px 0; color: #909399">
              日志趋势图表
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <span>日志级别分布</span>
          </template>
          <div class="chart-container">
            <div style="text-align: center; padding: 80px 0; color: #909399">
              日志级别饼图
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细分析 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="24">
        <el-card class="analysis-card">
          <el-tabs v-model="activeTab">
            <!-- 操作分析 -->
            <el-tab-pane label="操作分析" name="operation">
              <el-table :data="operationStats" stripe>
                <el-table-column prop="operation" label="操作类型" width="150" />
                <el-table-column prop="count" label="操作次数" width="120" align="right" />
                <el-table-column prop="successCount" label="成功次数" width="120" align="right">
                  <template #default="{ row }">
                    <el-tag type="success">{{ row.successCount }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="failCount" label="失败次数" width="120" align="right">
                  <template #default="{ row }">
                    <el-tag v-if="row.failCount > 0" type="danger">{{ row.failCount }}</el-tag>
                    <el-tag v-else type="info">0</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="successRate" label="成功率" width="150" align="center">
                  <template #default="{ row }">
                    <el-progress :percentage="row.successRate" />
                  </template>
                </el-table-column>
                <el-table-column prop="avgTime" label="平均耗时" width="120" align="right">
                  <template #default="{ row }">
                    {{ row.avgTime }}ms
                  </template>
                </el-table-column>
                <el-table-column prop="trend" label="趋势" width="120" align="center">
                  <template #default="{ row }">
                    <span :style="{ color: row.trend > 0 ? '#67c23a' : '#f56c6c' }">
                      <el-icon v-if="row.trend > 0"><CaretTop /></el-icon>
                      <el-icon v-else><CaretBottom /></el-icon>
                      {{ Math.abs(row.trend) }}%
                    </span>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <!-- 用户分析 -->
            <el-tab-pane label="用户分析" name="user">
              <el-table :data="userStats" stripe>
                <el-table-column prop="username" label="用户名" width="150" />
                <el-table-column prop="department" label="部门" width="150" />
                <el-table-column prop="loginCount" label="登录次数" width="120" align="right" />
                <el-table-column prop="operationCount" label="操作次数" width="120" align="right" />
                <el-table-column prop="avgOnlineTime" label="平均在线时长" width="150" />
                <el-table-column prop="lastLoginTime" label="最后登录" width="180" />
                <el-table-column prop="lastLoginIp" label="最后登录IP" width="150" />
                <el-table-column label="操作" width="120">
                  <template #default="{ row }">
                    <el-button link type="primary" @click="viewUserLogs(row)">查看日志</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <!-- 模块分析 -->
            <el-tab-pane label="模块分析" name="module">
              <el-table :data="moduleStats" stripe>
                <el-table-column prop="moduleName" label="模块名称" width="180" />
                <el-table-column prop="visitCount" label="访问次数" width="120" align="right" />
                <el-table-column prop="avgResponseTime" label="平均响应时间" width="150" align="right">
                  <template #default="{ row }">
                    {{ row.avgResponseTime }}ms
                  </template>
                </el-table-column>
                <el-table-column prop="errorRate" label="错误率" width="120" align="center">
                  <template #default="{ row }">
                    <el-tag :type="getErrorRateType(row.errorRate)">
                      {{ row.errorRate }}%
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="usage" label="使用率" width="150" align="center">
                  <template #default="{ row }">
                    <el-progress :percentage="row.usage" />
                  </template>
                </el-table-column>
                <el-table-column prop="peakTime" label="高峰时段" width="120" />
              </el-table>
            </el-tab-pane>

            <!-- 异常分析 -->
            <el-tab-pane label="异常分析" name="error">
              <el-table :data="errorStats" stripe>
                <el-table-column prop="errorType" label="错误类型" width="150" />
                <el-table-column prop="errorMessage" label="错误消息" min-width="200" show-overflow-tooltip />
                <el-table-column prop="occurCount" label="发生次数" width="120" align="right">
                  <template #default="{ row }">
                    <el-tag type="danger">{{ row.occurCount }}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="affectedUsers" label="影响用户数" width="120" align="center" />
                <el-table-column prop="firstOccur" label="首次出现" width="180" />
                <el-table-column prop="lastOccur" label="最后出现" width="180" />
                <el-table-column label="操作" width="180" fixed="right">
                  <template #default="{ row }">
                    <el-button link type="primary" @click="viewErrorDetail(row)">详情</el-button>
                    <el-button link type="warning" @click="createIssue(row)">创建问题</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>

            <!-- 性能分析 -->
            <el-tab-pane label="性能分析" name="performance">
              <el-table :data="performanceStats" stripe>
                <el-table-column prop="apiPath" label="API路径" min-width="200" />
                <el-table-column prop="callCount" label="调用次数" width="120" align="right" />
                <el-table-column prop="avgTime" label="平均耗时" width="120" align="right">
                  <template #default="{ row }">
                    <el-tag :type="getTimeType(row.avgTime)">{{ row.avgTime }}ms</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="maxTime" label="最大耗时" width="120" align="right">
                  <template #default="{ row }">
                    {{ row.maxTime }}ms
                  </template>
                </el-table-column>
                <el-table-column prop="minTime" label="最小耗时" width="120" align="right">
                  <template #default="{ row }">
                    {{ row.minTime }}ms
                  </template>
                </el-table-column>
                <el-table-column prop="slowCount" label="慢查询次数" width="120" align="right">
                  <template #default="{ row }">
                    <el-tag v-if="row.slowCount > 0" type="warning">{{ row.slowCount }}</el-tag>
                    <el-tag v-else type="success">0</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 统计数据
const stats = reactive({
  totalLogs: 15826,
  errorLogs: 45,
  warningLogs: 128,
  activeUsers: 186
})

// 当前标签页
const activeTab = ref('operation')
const trendPeriod = ref('today')

// 操作统计
const operationStats = ref([
  {
    operation: '用户登录',
    count: 328,
    successCount: 325,
    failCount: 3,
    successRate: 99,
    avgTime: 125,
    trend: 5.2
  },
  {
    operation: '查询商品',
    count: 1586,
    successCount: 1582,
    failCount: 4,
    successRate: 99.7,
    avgTime: 85,
    trend: -2.3
  },
  {
    operation: '创建订单',
    count: 256,
    successCount: 248,
    failCount: 8,
    successRate: 96.9,
    avgTime: 256,
    trend: 12.5
  }
])

// 用户统计
const userStats = ref([
  {
    username: '张三',
    department: '销售部',
    loginCount: 28,
    operationCount: 586,
    avgOnlineTime: '6.5小时',
    lastLoginTime: '2025-01-13 14:30',
    lastLoginIp: '192.168.1.101'
  },
  {
    username: '李四',
    department: '财务部',
    loginCount: 25,
    operationCount: 432,
    avgOnlineTime: '5.8小时',
    lastLoginTime: '2025-01-13 13:45',
    lastLoginIp: '192.168.1.102'
  }
])

// 模块统计
const moduleStats = ref([
  {
    moduleName: '销售管理',
    visitCount: 2586,
    avgResponseTime: 125,
    errorRate: 0.8,
    usage: 85,
    peakTime: '10:00-12:00'
  },
  {
    moduleName: '库存管理',
    visitCount: 1856,
    avgResponseTime: 156,
    errorRate: 1.2,
    usage: 72,
    peakTime: '14:00-16:00'
  },
  {
    moduleName: '财务管理',
    visitCount: 1256,
    avgResponseTime: 185,
    errorRate: 0.5,
    usage: 65,
    peakTime: '09:00-11:00'
  }
])

// 错误统计
const errorStats = ref([
  {
    errorType: 'NullPointerException',
    errorMessage: '空指针异常：无法读取null的属性',
    occurCount: 15,
    affectedUsers: 8,
    firstOccur: '2025-01-13 09:15',
    lastOccur: '2025-01-13 14:30'
  },
  {
    errorType: 'DatabaseException',
    errorMessage: '数据库连接超时',
    occurCount: 8,
    affectedUsers: 12,
    firstOccur: '2025-01-13 10:20',
    lastOccur: '2025-01-13 13:45'
  }
])

// 性能统计
const performanceStats = ref([
  {
    apiPath: '/api/product/list',
    callCount: 1586,
    avgTime: 85,
    maxTime: 356,
    minTime: 45,
    slowCount: 12
  },
  {
    apiPath: '/api/order/create',
    callCount: 256,
    avgTime: 256,
    maxTime: 856,
    minTime: 125,
    slowCount: 28
  },
  {
    apiPath: '/api/inventory/stock',
    callCount: 856,
    avgTime: 125,
    maxTime: 425,
    minTime: 68,
    slowCount: 8
  }
])

// 方法
const getErrorRateType = (rate) => {
  if (rate >= 5) return 'danger'
  if (rate >= 2) return 'warning'
  return 'success'
}

const getTimeType = (time) => {
  if (time >= 300) return 'danger'
  if (time >= 200) return 'warning'
  return 'success'
}

const viewUserLogs = (row) => {
  console.log('查看用户日志', row)
  ElMessage.info('查看用户操作日志')
}

const viewErrorDetail = (row) => {
  console.log('查看错误详情', row)
  ElMessage.info('查看错误详细信息')
}

const createIssue = (row) => {
  console.log('创建问题', row)
  ElMessage.success('问题已创建')
}
</script>

<style scoped lang="scss">
.log-analytics-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    font-size: 24px;
    color: #303133;
  }
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);

  .stat-icon {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 15px;
  }

  .stat-content {
    flex: 1;

    .stat-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
      margin-bottom: 5px;
    }

    .stat-label {
      font-size: 14px;
      color: #909399;
    }
  }
}

.chart-card {
  margin-bottom: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .chart-container {
    height: 300px;
  }
}

.analysis-card {
  :deep(.el-card__body) {
    padding-top: 0;
  }
}
</style>

